<template>
    <div class="messes-dialog" v-if="isShowDialog">
        <div class="messes-box">
            <div class="del-box">
                <p class="del-word" v-html="message" @click="handle($event)"></p>
            </div>
            <span class="dialog-footer" v-if="!hideBtnPre || !hideBtnNext">
                <el-button class="none-type" @click="btnPre" v-if="!hideBtnPre">{{ btnPreText }}</el-button>
                <el-button type="primary" @click="btnNext" v-if="!hideBtnNext">{{ btnNextText }}</el-button>
                <!-- <el-button type="primary" :disabled="wait" @click="btnNext">确认{{ timeWord }}</el-button> -->
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        // name: 'toast',
        data() {
            return {
                title: '',
                // timeWord: '（10）',
                timeWord: '',
                message: this.message,
                btnNextText: this.btnNextText,
                btnPreText: this.btnPreText,
                hideBtnPre: this.hideBtnPre,
                hideBtnNext: this.hideBtnNext,
                wait: true,
                isShowDialog: false,
                iTimer: null
            }
        },
        methods: {
            btnNext() {
                this.isShowDialog = false;
                this.resolve(true);
            },
            btnPre() {
                this.isShowDialog = false;
                clearInterval(this.iTimer)
                if(this.reject){
                    this.reject('取消了');
                }
            },
            handle($event) {
                if ($event.target.tagName == 'A') {
                    this.btnNext()
                }
            }
        },
        mounted () {
            let i = 0
            this.iTimer = setInterval(() => {
                if (i == 0) {
                    clearInterval(this.iTimer)
                    this.timeWord = ''
                    this.wait = false
                } else {
                    i --
                    this.timeWord = `（${i}）`
                }
            }, 1000)
        }
    }
</script>

<style lang='less' scoped>
.messes-dialog{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, .6);
    left: 0;
    top: 0;
    z-index: 999;
    .messes-box{
        position: fixed;
        left: 50%;
        top: 50%;
        min-width: 500px;
        border-radius: 4px;
        padding: 20px 20px 50px;
        
        box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);
        transform: translate(-50%, -50%);
        background-color: #FFF;
    }
    .dialog-footer{
        position: absolute;
        right: 30px;
        bottom: 20px;
    }
}
.del-box{
    padding: 60px 0;
    // .warning{

    // }
    .del-word {
        // padding-left: 30px;
        font-size: 16px;
        text-align: center;
    }
}
</style>
